<template>
<!-- 通信服务统计 -->
    <div class="communications-services-statistics-wrap">
        <div class="model-title">通信服务统计</div>
        <!-- 筛选条件 -->
        <div class="search-condition">
            <ul class="date-type-list">
                <li class="date-type-item" :class="{'selected': searchForm.dateType==4}" @click="changDateType(4)">全部</li>
                <li class="date-type-item" :class="{'selected': searchForm.dateType==1}" @click="changDateType(1)">日</li>
                <li class="date-type-item" :class="{'selected': searchForm.dateType==2}" @click="changDateType(2)">月</li>
                <li class="date-type-item" :class="{'selected': searchForm.dateType==3}" @click="changDateType(3)">年</li>
            </ul>
        </div>
        <div class="model-content-wrap" :class="{'no-cell-center': !hasCellCenter}">
            <div class="left-model-wrap">
                <div class="left-model-item mes-statistics">
                    <!-- <p class="item-value">{{ mesToatl }}</p> -->
                    <number-scroll class="item-value" :time="1" :value="mesToatl"></number-scroll>
                    <p class="item-title">短信统计</p>
                </div>
                <div class="left-model-item email-statistics">
                    <!-- <p class="item-value">{{ emailTotal }}</p> -->
                    <number-scroll class="item-value" :time="1" :value="emailTotal"></number-scroll>
                    <p class="item-title">邮件统计</p>
                </div>
                <div class="left-model-item voice-statistics">
                    <!-- <p class="item-value">{{ AIVoiceTotal }}</p> -->
                    <number-scroll class="item-value" :time="1" :value="AIVoiceTotal"></number-scroll>
                    <p class="item-title">语音智能识别次数</p>
                </div>
            </div>
            <div class="right-model-wrap" v-if="hasCellCenter">
                <div class="right-model-item video-phone">
                    <p class="item-title">视频通话</p>
                    <div class="value-wrap">
                        <p class="item-value first-value">次数<number-scroll :time="1" :value="videoTotal"></number-scroll><!--<span>{{ videoTotal }}</span>--></p>
                        <p class="item-value second-value">时长<span>{{ videoTime }}</span></p>
                    </div>
                </div>
                <div class="right-model-item call-center">
                    <p class="item-title">呼叫中心</p>
                    <div class="value-wrap">
                        <p class="item-value first-value" :style="{'width': callInDomWidth}">呼入<number-scroll :time="1" :value="callInTotal"></number-scroll><!--<span>{{ callInTotal }}</span>--></p>
                        <p class="item-value second-value" :style="{'width': callOutDomWidth}">呼出<number-scroll :time="1" :value="callOutTotal"></number-scroll><!--<span>{{ callOutTotal }}</span>--></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import utils from '@/utils/util'
import NumberScroll from '@/libs/NumberScroll/Main'
import { getMailNumByType, getMessageNumByType } from '@/api/platMonitor'

export default {
    name: 'CommunicationsServicesStatistics',
    components: {
        NumberScroll
    },
    data() {
        return {
            searchForm: {
                dateType: 4 // 1：日(最近24小时)，2：月（最近30天），3：年（最近12个月），4:所有（从2015年开始的数据）
            },
            mesToatl: 0, // 短信统计
            emailTotal: 0, // 邮件统计
            AIVoiceTotal: 0, // 智能语音识别次数
            videoTotal: 432, // 次数
            videoTime: '145:54:12', // 时长
            callInTotal: 348, // 呼入
            callOutTotal: 231, // 呼出
            callInDomWidth: '50%', // 呼入元素宽度
            callOutDomWidth: '50%', // 呼入元素宽度
            hasCellCenter: false // 系统是否包含呼叫中心功能
        }
    },
    created() {
        let date = new Date()
        let RightCard1Arr = this.bsConfig.RightMenu.cards1 || []
        let RightCard2Arr = this.bsConfig.RightMenu.cards2 || []

        // 根据配置文件，看是否含有呼叫中心功能
        for(let i=0, len=RightCard1Arr.length; i < len; i++) {
            if(RightCard1Arr[i].id === 'CardCellCenter') {
                this.hasCellCenter = true
                return
            }
        }
        if(!this.hasCellCenter) {
            for(let i=0, len=RightCard2Arr.length; i < len; i++) {
                if(RightCard2Arr[i].id === 'CardCellCenter') {
                    this.hasCellCenter = true
                    return
                }
            }
        }

        this.initPage()
        // 随机生成只能语音识别次数,5分钟增加一次
        this.AIVoiceTotal = Math.ceil((new Date().getTime()-new Date('2020-01-01').getTime())/300000)-50000
        // 换算呼入呼出元素宽度
        this.$nextTick(() => {
            this.calculationCallDomWidth(this.callInTotal, this.callOutTotal)
        })
    },
    methods: {
        initPage() {
            this.getMesData()
            this.getEmailData()
        },
        // 获取短信统计
        getMesData() {
            let that = this
            let parames = {
                type: that.searchForm.dateType
            }
            getMessageNumByType(parames).then(res => {
                if(res.status === 200) {
                    that.mesToatl = res.data.total
                }
            })
        },
        // 获取邮件统计
        getEmailData() {
            let that = this
            let parames = {
                type: that.searchForm.dateType
            }
            getMailNumByType(parames).then(res => {
                if(res.status === 200) {
                    that.emailTotal = res.data.total
                }
            })
        },
        // 计算呼入和呼出长度 
        calculationCallDomWidth(callIn, callOut) {
            let sum = utils.accAdd(callIn, callOut)
            let callInPercent = Math.round(callIn/sum*100)
            let minWidthConfig = {
                '1': 22,
                '2': 26,
                '3': 31,
                '4': 35,
                '5': 39,
            } // 不同位数对应最小宽度比
            let minWidth = minWidthConfig[String(callIn > callOut ? callOut : callIn).length] || 50 // 最小宽度比
            let maxWidth = utils.accSub(100, minWidth)

            if(callInPercent < minWidth) {
                this.callInDomWidth = minWidth + '%'
                this.callOutDomWidth = maxWidth + '%'
            } else if (callInPercent > maxWidth){
                this.callInDomWidth = maxWidth + '%'
                this.callOutDomWidth = minWidth + '%'
            } else {
                this.callInDomWidth = callInPercent + '%'
                this.callOutDomWidth = utils.accSub(100, callInPercent) + '%'
            }
        },
        // 修改统计日期类型
        changDateType(type) {
            if(type) {
                this.searchForm.dateType = type
                this.initPage()
            }
        }
    }
}
</script>
<style lang="scss">
.communications-services-statistics-wrap {
    position: relative;
    height: 100%;
    .search-condition {
        position: absolute;
        top: 20px;
        right: 50px;
        display: flex;
        align-items: center;
        .date-type-list {
            display: flex;
            margin-right: 30px;
            height: 40px;
            border: 1px solid rgba(104,169,255,.4);
            border-left: none;
            color: #A3BEDD;
            .date-type-item {
                border-left: 1px solid rgba(104,169,255,.4);
                padding: 6px 15px;
                font-size: 18px;
                cursor: pointer;
                &.selected {
                    background:rgba(19,76,153,.8);
                }
            }
        }
    }
    .model-content-wrap {
        display: flex;
        align-items: center;
        height: calc(100% - 30px);
        .left-model-wrap {
            display: flex;
            flex-wrap: wrap;
            width: 40%;
            height: 100%;
            background: url(../../../../../assets/images/detailPage/voice.gif) 90% 96% no-repeat;
            background-size: 30%;
            .left-model-item {
                margin-top: 10px;
                .item-value {
                    font-size: 34px;
                }
                .item-title {
                    font-size:20px;
                    line-height: 24px;
                    color:rgba(163,190,221,.3);
                }
            }
            .mes-statistics {
                width: 65%;
                .item-value {
                    color: #9D4BB2;
                }
            }
            .email-statistics {
                width: 35%;
                .item-value {
                    color: #68A9FF;
                }
            }
            .voice-statistics {
                margin-top: 20px;
                width: 100%;
                .item-value {
                    color: #52DBF1;
                }
            }
        }
        .right-model-wrap {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-left: 1px solid rgba(255,255,255,.1);
            margin-top: 10px;
            width: 60%;
            height: 80%;
            .right-model-item {
                display: flex;
                padding-left: 30px;
                width: 100%;
                line-height: 40px;
                .item-title {
                    font-size:28px;
                    color:#A3BEDD;
                }
                .value-wrap {
                    display: flex;
                    justify-content: space-between;
                    margin-left: 20px;
                    width: calc(100% - 132px);
                    .item-value {
                        font-size: 22px;
                        span {
                            margin-left: 10px;
                        }
                    }
                }
                .first-value {
                    display: flex;
                    color: #8480FF;
                }
                .second-value {
                    display: flex;
                    justify-content: flex-end;
                    color: #68A9FF;
                }
            }
            .call-center {
                height: 50px;
                line-height: 50px;
                .value-wrap {
                    line-height: 40px;
                }
                .first-value {
                    border-bottom: 8px solid;
                    border-image: -webkit-linear-gradient(0deg,#7366F5, #4B68F6) 20;
                }
                .second-value {
                    margin-left: 10px;
                    text-align: right;
                    border-bottom: 8px solid;
                    border-image: -webkit-linear-gradient(0deg,#127DFF, #27F7FF) 20;
                }
            }
        }
        &.no-cell-center {
            .left-model-wrap {
                align-items: center;
                width: 100%;
                background-size: 15%;
                background-position: 95% 60%;
                .mes-statistics {
                    width: 25%;
                }
                .email-statistics {
                    width: 25%;
                }
                .voice-statistics {
                    margin-top: 20px;
                    width: 50%;
                }
            }
        }
    }
}
</style>
